<template>
  <el-card class="mb-5">
    <div class="flex justify-between items-center" slot="header">
      <SelectTime
        @handleChange="handleChange"
        @handleDate="handleDate"
      ></SelectTime>
      <div class="flex flex-col items-center">
        <div class="text-xl font-bold">
          <slot name="title"></slot>
        </div>
        <div class="text-sm font-normal text-gray-500">
          <slot name="remark"></slot>
        </div>
      </div>
    </div>
    <div
      id="user_chart"
      class="w-full "
      style="height:400px"
      ref="user_chart"
    ></div>
  </el-card>
</template>

<script>
import * as echarts from "echarts";

import SelectTime from "../selectTime/selectTime";

import { getUserFunnelData } from "@/api/dataPanel/userStatistic";

export default {
  name: "",
  data() {
    return {
      form: {
        date_tag: -1,
        start_date: "",
        end_date: ""
      },
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c}({d}%)"
        },
        color: [
          "#5470c6",
          "#91cc75",
          "#fac858",
          "#ee6666",
          "#73c0de",
          "#3ba272",
          "#fc8452",
          "#9a60b4",
          "#ea7ccc"
        ],
        legend: {
          data: ["注册人数", "登录人数", "充值人数"]
        },
        series: [
          {
            name: "用户转化漏斗",
            type: "funnel",
            left: "10%",
            top: 60,
            bottom: 60,
            width: "80%",
            min: 0,
            max: 100,
            minSize: "0%",
            maxSize: "100%",
            sort: "descending",
            gap: 2,
            label: {
              show: true,
              position: "inside"
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: "solid"
              }
            },
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data: [
              { value: 30, name: "注册人数" },
              { value: 10, name: "登录人数" },
              { value: 5, name: "充值人数" }
            ],
            // Ensure outer shape will not be over inner shape when hover.
            z: 100
          }
        ]
      }
    };
  },
  components: {
    SelectTime
  },
  computed: {
    user_chart() {
      return echarts.init(this.$refs["user_chart"]);
    }
  },
  created() {
    this.handleGetData();
  },
  mounted() {
    let that = this;
    this.drawline();
    window.addEventListener("resize", () => {
      that.user_chart.resize();
    });
  },
  methods: {
    async handleGetData() {
      const { data } = await getUserFunnelData(this.form);

      this.option.series[0].data.forEach(item => {
        switch (item.name) {
          case "注册人数":
            item.value = data.register_count * 1;
            break;
          case "登录人数":
            item.value = data.login_count * 1;
            break;
          case "充值人数":
            item.value = data.recharge_count * 1;
            break;
        }
      });
      this.user_chart.setOption(this.option);
    },
    handleChange(value) {
      this.form = value;
      this.handleGetData();
    },
    handleDate(value) {
      this.form = value;
      this.handleGetData();
    },
    drawline() {
      this.user_chart.setOption(this.option);
    }
  }
};
</script>
<style lang="scss" scoped></style>
